<template>
	<!-- 底部tab -->
	<view class="bottom-tab flex-item-center">
		<view class="tab-item" :class="{active: curIndex == index}" v-for="(item, index) in tabList" :key="index"
			@click="toJump(item)">
			<image :src="curIndex == index? item.activeImg: item.imgUrl"></image>
			<view>{{ $t('index.tabBar.' + item.titleKey) }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			curIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabList: [{
					imgUrl: '/static/tab-one.png',
					activeImg: '/static/tab-one-active.png',
					url: '/pages/index/index',
					titleKey: 'home' // 对应国际化配置中的键名
				}, {
					imgUrl: '/static/tab-two.png',
					activeImg: '/static/tab-two-active.png',
					url: '/pages/memory/memory',
					titleKey: 'memory'
				}, {
					imgUrl: '/static/tab-three.png',
					activeImg: '/static/tab-three-active.png',
					url: '/pages/diary/diary',
					titleKey: 'diary'
				}, {
					imgUrl: '/static/tab-four.png',
					activeImg: '/static/tab-four-active.png',
					url: '/pages/beach/index',
					titleKey: 'beach'
				}],
			}
		},
		methods: {
			toJump(item) {
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.bottom-tab {
		position: fixed;
		bottom: 30rpx;
		left: 40rpx;
		width: 680rpx;
		height: 140rpx;
		background-color: #fff;
		border-radius: 70rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(233, 233, 233, 0.5);
		z-index: 99;
		padding: 0 20rpx;

		.tab-item {
			width: 25%;
			text-align: center;
			font-size: 32rpx;
			color: #D9D9D9;

			image {
				margin: 0 auto 8rpx;
				display: block;
				width: 48rpx;
				height: 48rpx;
			}

			&.active {
				color: #52A5F3;

				image {
					transform: scale(1.5);
				}
			}
		}
	}
</style>